﻿@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

<script src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script>
<style>
  
    body {
background-color: #E8E7E3;
}

#ColumnContainer {
    position: relative;
    min-width: 500px;
    min-height: 500px;
    margin: 0 auto;
}

#article {
    width: auto;
    min-width: 500px;
    padding: 8px 0 0 0;
}

#wrapper {
    position: relative;
    width: auto;
    margin: 0 auto;
    border: none;
}

#loadingPins {
    display: none;
    height: 20px;
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    border-top: 1px solid #CCC;
}

#loadingPins img {
    display: inline-block;
    margin-right: 6px;
}

#loadingPins span {
    font-size: 1.3em;
}

.pin {
    position: absolute;
    width: 193px;
    padding: 14px;
    background-color: white;
    overflow: hidden;
    margin-bottom: 20px;
}

.pin .image {
    position: relative;
    display: block;
    width: 190px;
    overflow: hidden;
    background-color: white;
    border: 1px solid white;
}

.pin .description {
    padding-top: 4px;
}

.pin p {
    display: block;
    margin: 0 2px;
    font-size: 1.1em;
    line-height: 1.45em;
}

.pin .image img {
    display: block;
}
</style>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<div id="ColumnContainer">
    
</div>

<script type="tpl" id="tpl">
    <div class="pin ks-waterfall" data-id="{{Id}}">
        <a href="#" class="image">
            <img height="{{height}}" alt="{{title}}" src="{{Src}}" />
        </a>
        <p class="description">{{Title}}</p>
    </div>
</script>


<script>
    KISSY.use("waterfall,ajax,gallery/template/1.0/,node,button", function (S, Waterfall, io, Template, Node, Button) {
        var $ = Node.all;

        var tpl = Template($('#tpl').html()),
            nextpage = 1,
            waterfall = new Waterfall.Loader({
                container: "#ColumnContainer",
                load: function (success, end) {
                    $('#loadingPins').show();
                    S.IO({
                        //data: {
                        //    'method': 'flickr.photos.search',
                        //    'api_key': '5d93c2e473e39e9307e86d4a01381266',
                        //    'tags': 'rose',
                        //    'page': nextpage,
                        //    'per_page': 20,
                        //    'format': 'json'
                        //},
                        url: '/Home/GetPictures?pageIndex=' + nextpage,
                        dataType: "json",
                        //jsonp: "jsoncallback",
                        success: function (d) {
                            // 如果数据错误, 则立即结束
                            //if (d.stat !== 'ok') {
                            //    alert('load data error!');
                            //    end();
                            //    return;
                            //}
                            // 如果到最后一页了, 也结束加载
                            
                            nextpage = d.Photos.Page + 1;
                            if (nextpage > d.Photos.Pages) {
                                end();
                                return;
                            }
                            // 拼装每页数据
                            var items = [];
                            S.each(d.Photos.Photo, function (item) {
                                item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height
                                items.push(new S.Node(tpl.render(item)));
                            });
                            success(items);
                        },
                        complete: function () {
                            $('#loadingPins').hide();
                        }
                    });
                },
                minColCount: 2,
                colWidth: 228
            });

        //// scrollTo
        //$('#BackToTop').on('click', function (e) {
        //    e.halt();
        //    e.preventDefault();
        //    $(window).stop();
        //    $(window).animate({
        //        scrollTop: 0
        //    }, 1, "easeOut");
        //});

        //var b1 = new Button({
        //    content: "停止加载",
        //    render: "#button_container"
        //});

        //// 点击按钮后, 停止瀑布图效果
        //b1.render();
        //b1.on("click", function () {
        //    waterfall.destroy();
        //});
    });
</script>
